<template>
  <div class="review-page">
    <el-card class="question-card">
      <div class="question-header">
        <!-- 显示当前题目进度的文字 -->
        <div class="question-progress">
          <el-progress
              :percentage="progress"
              type="line"
              status="success"
              style="width: 100%; margin-bottom: 10px;"
          />
          <p class="progress-text">第 {{ currentIndex + 1 }} 题 / 共 {{ questions.length }} 题</p>
        </div>
      </div>

      <!-- 根据题目类型动态渲染问题 -->
      <div class="question-content">
        <p>{{ questions[currentIndex].question }}</p>
        <!-- 选择题 -->
        <div v-if="questions[currentIndex].type === 'choice'">
          <el-radio-group v-model="userAnswers[currentIndex]">
            <el-radio v-for="(option, index) in questions[currentIndex].options" :key="index" :label="option">
              {{ option }}
            </el-radio>
          </el-radio-group>
        </div>
        <!-- 填空题 -->
        <div v-else-if="questions[currentIndex].type === 'fill'">
          <el-input v-model="userAnswers[currentIndex]" :placeholder="questions[currentIndex].placeholder" />
        </div>
        <!-- 问答题 -->
        <div v-else-if="questions[currentIndex].type === 'text'">
          <el-input type="textarea" v-model="userAnswers[currentIndex]" placeholder="请填写你的答案" />
        </div>
      </div>

      <div class="answer-section">
        <el-button @click="showAnswer = !showAnswer">{{ showAnswer ? '隐藏答案' : '显示答案' }}</el-button>
        <div v-if="showAnswer">
          <el-alert :title="questions[currentIndex].answer" type="success" show-icon />
        </div>
      </div>

      <div class="navigation-buttons">
        <el-button @click="prevQuestion" :disabled="currentIndex === 0">上一题</el-button>
        <el-button @click="nextQuestion" :disabled="currentIndex === questions.length - 1">下一题</el-button>
      </div>

      <div class="timer">
        <el-tag>{{ formatTime(timer) }}</el-tag>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0, // 当前展示的问题索引
      showAnswer: false, // 控制显示或隐藏答案
      timer: 0, // 计时器
      progress: 0, // 进度条的百分比
      userAnswers: [], // 存储用户的答案
      questions: [
        {
          question: "Python 中如何定义列表？",
          type: "text",
          answer: "列表用方括号 [] 定义。"
        },
        {
          question: "字典在 Python 中使用什么符号？",
          type: "choice",
          options: ["[]", "{}", "()", "<>"],
          answer: "{}"
        },
        {
          question: "Vue.js 是什么？",
          type: "text",
          answer: "Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。"
        },
        {
          question: "填空题：Element UI 是一个基于 ___ 的组件库。",
          type: "fill",
          placeholder: "请输入答案",
          answer: "Vue.js"
        },
        {
          question: "Python 中如何定义函数？",
          type: "text",
          answer: "使用关键词 def 定义函数，例如：def function_name():"
        },
      ],
    };
  },
  mounted() {
    this.startTimer(); // 启动计时器
    this.updateProgress(); // 更新进度条
  },
  methods: {
    startTimer() {
      setInterval(() => {
        this.timer++;
      }, 1000);
    },
    formatTime(seconds) {
      const min = Math.floor(seconds / 60);
      const sec = seconds % 60;
      return `${min} 分 ${sec} 秒`;
    },
    prevQuestion() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
        this.showAnswer = false; // 翻页时隐藏答案
        this.updateProgress();
      }
    },
    nextQuestion() {
      if (this.currentIndex < this.questions.length - 1) {
        this.currentIndex++;
        this.showAnswer = false; // 翻页时隐藏答案
        this.updateProgress();
      }
    },
    updateProgress() {
      // 更新进度条
      this.progress = ((this.currentIndex + 1) / this.questions.length) * 100;
    },
  },
};
</script>

<style scoped>
/* 保持原有样式 */
.review-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.question-card {
  width: 600px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: white;
  border-radius: 8px;
}

.question-header {
  margin-bottom: 20px;
}

.question-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress-text {
  font-size: 16px;
  color: #606266;
  white-space: nowrap; /* 确保在一行显示 */
}

.question-content {
  font-size: 18px;
  margin-bottom: 20px;
  color: #333;
}

.answer-section {
  margin-bottom: 20px;
}

.answer-section .el-button {
  margin-bottom: 10px; /* 增加按钮的间距 */
}

.el-input {
  margin-top: 10px;
  width: 100%; /* 设置输入框的宽度为100%，保持布局 */
}

.navigation-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.navigation-buttons .el-button {
  width: 120px; /* 为按钮设置统一宽度 */
}

.timer {
  text-align: center;
  font-size: 14px;
  color: #909399;
}

.el-card {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
}

.el-progress {
  height: 8px; /* 增加进度条的高度 */
}

.el-alert {
  margin-top: 10px;
}

.el-tag {
  font-size: 14px;

}

</style>
